<template>
  <div class="header bgColor">
      <div class="leftBox">
          <i class="iconfont icon-icon-navicon expanded" @click="expend()"></i>
          {{env.portalName}}
      </div>
      
      <div class="rightBox">
            <!-- 设置 -->
            <div class="right rightspace downTheme">
                <p @click.stop="slideDownSet" class="cursorP">
                    {{userName}}
                    <i class="iconfont icon-icon-angle-bottom"></i>
                </p>
                <div class="themeList" v-show="envSetFlag">
                    <ul class="hoverBg">
                        <li @click="dialogWorkEnvFn"><i class="iconfont icon-gongzuohuanjingpeizhi"></i>工作环境设置</li>
                        <li @click="drawer = true"><i class="iconfont icon-huanfu"></i>布局设置</li>
                        <li @click="dialogWorkBenchFn"><i class="iconfont icon-qiehuanzhuti"></i>重置工作台</li>
                        <li @click="dialogUserInfoFn"><i class="iconfont icon-gerenxinxi"></i>个人信息</li>
                        <li @click="dialogPasswordFn"><i class="iconfont icon-xiugaimima"></i>修改密码</li>
                        <li><i class="iconfont icon-tuichu1"></i>退出系统</li>
                    </ul>
                </div>
            </div>
            <p class="right rightspace">{{allvalueReal.defaultFiscalYear}} | {{allvalueReal.userofficesName}} | </p>
            <!-- 全屏显示 -->
            <div class="btn-fullscreen right rightspace" @click="handleFullScreen">
                <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                    <i class="iconfont el-icon-rank cursorP"></i>
                </el-tooltip>
            </div>
            <!-- 主题切换 -->
            <div class="right rightspace downTheme">
                <p @click.stop="slideDownTheme" class="cursorP">
                    {{currentRoleTheme.themeName}}
                    <i class="iconfont icon-icon-angle-bottom"></i>
                </p>
                <div class="themeList" v-show="themeListFlag">
                    <ul class="hoverBg">
                        <li :class="index==themeIndex?'fontColor':''" v-for="(item,index) in roleTheme" :key="item.id" @click="roleThemeFn(item,index)">{{index==themeIndex?'当前：':''}}{{item.themeName}}</li>
                    </ul>
                </div>
            </div>
      </div>
      <el-drawer
        title="布局设置"
        :visible.sync="drawer"
        size="20%"
        @close="closeALL">
            <p>切换主题颜色</p>
            <ul id="spectrumPalette">
                <li v-for="item in spectrumPaletteDate" :key="item.id" :style="`background:${item.code}`" @click="setThemeColor(item)">{{item.code}}</li>
            </ul>
      </el-drawer>
      <WorkEnv :dialogWorkEnv="dialogWorkEnv" />
      <ResetWorkBench :dialogResetWorkBench="dialogResetWorkBench" />
      <PasswordChange :dialogPassword="dialogPassword" />
      <UserInfo :dialogUserInfo="dialogUserInfo" />
  </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil.js';
import { createNamespacedHelpers } from 'vuex';
const { mapMutations, mapActions,mapState,mapGetters } = createNamespacedHelpers('homeModule');
import WorkEnv from './headerDefault/WorkEnv';
import ResetWorkBench from './headerDefault/ResetWorkBench';
import PasswordChange from './headerDefault/PasswordChange';
import UserInfo from './headerDefault/UserInfo';
import bus from '../common/bus';
export default {
    name: 'Header',
    data () {
        return {
            userName:appUtil.getSes('userName'),
            fullscreen:false, // 全屏标识
            themeListFlag: false, // 主题列表标识
            envSetFlag: false, // 环境设置
            drawer:false, // 抽屉
            dialogWorkEnv:false, // 工作环境配置
            dialogResetWorkBench:false, // 重置工作台
            dialogPassword:false, // 修改密码
            dialogUserInfo:false, // 更新个人信息
            themeIndex:0 // 主题列表索引
        };
    },
    inject: ['mainChannel'],
    computed: {
        ...mapState({
            roleTheme:state => state.roleTheme,
            currentRoleTheme:state => state.currentRoleTheme,
            env:state => state.env,
            allvalue:state => state.allvalue,
            allvalueReal: state => state.allvalueReal,
            spectrumPaletteDate:state => state.spectrumPaletteDate
        }),
        ...mapGetters([
        ])
    },
    components: {
        WorkEnv,
        ResetWorkBench,
        PasswordChange,
        UserInfo
    },
    created () {
        
        
        // 获取所有主题
        // this.getRoleThemeAsync();
        let that = this;
        process.client ? document.querySelector('body').onclick=function(){
            that.themeListFlag = false;
            that.envSetFlag = false;
        } : {};
    },
    methods: {
        ...mapMutations([
            'updateMenu',
            'updateRoleTheme'
        ]),
        ...mapActions([
            // 'getRoleTheme',
            'getEnvAsync',
            'getThemeDetailsAsync',
            'getEngSwitchAsync'
        ]),
        expend () {
            this.updateMenu();
        },
        // 全屏事件
        handleFullScreen () {
            const document = process.client ? document : {};
            let element = document.documentElement;
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            let that = this;
            setTimeout(function(){
                that.$emit('initLayout');
            },50);
            this.fullscreen = !this.fullscreen;
        },
        // 主题切换
        slideDownTheme () {
            this.themeListFlag = !this.themeListFlag;
            this.envSetFlag = false;
        },
        // 设置
        slideDownSet () {
            this.envSetFlag = !this.envSetFlag;
            this.themeListFlag = false;
        },

        // 设置主题颜色
        setThemeColor (item) {
            bus.$emit('setThemeColor',item);
            this.mainChannel.postMessage({
                colors:'#'+item.code.slice(1,7),
            });
        },
        // 关闭所有弹框
        closeALL () {
            this.envSetFlag = false;
            this.dialogWorkEnv = false;
            this.dialogResetWorkBench = false;
            this.dialogPassword = false;
            this.dialogUserInfo = false;
        },
        // 弹出工作环境设置
        dialogWorkEnvFn () {
            this.dialogWorkEnv = true;
        },
        // 弹出重置工作台
        dialogWorkBenchFn () {
            this.dialogResetWorkBench = true;
        },
        // 弹出修改密码
        dialogPasswordFn(){
            this.dialogPassword = true;
        },
        // 弹出个人信息更新框
        dialogUserInfoFn(){
            this.dialogUserInfo = true;
        },
        // 切换主题
        roleThemeFn(item,index){
            // 根据主题id 获取主题详情
            //this.getThemeDetailsAsync(item.themeId);
            // 更新当前主题
            this.updateRoleTheme(item.themeId);
            this.themeIndex = index;
            // 切换主题
            this.getEngSwitchAsync(item.themeId);
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header::before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.header{
    height: 100%;
    .leftBox {
        display: inline-block;
        vertical-align: middle;
        width: 30%;
        color: #fff;
    }
    .rightBox{
        display: inline-block;
        vertical-align: middle;
        width: 70%;
        color: #fff;
        .rightspace{
            margin-right: 20px;
            height: 32px;
            line-height: 32px;
        }
        .downTheme{
            position: relative;
            .icon-icon-angle-bottom{
                font-size: 12px;
                
            }
            .themeList{
                position: absolute;
                right: -10px;
                z-index: 2;
                background: #fff;
                box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
                color: #333;
                width: 160px;
                border-radius: 4px;
                li{
                    cursor: pointer;
                    padding: 0 10px;
                    i{
                        font-size: 14px;
                        margin-right: 6px;
                    }
                }
            }
        }
    }
    .expanded{
        margin: 16px;
        cursor: pointer;
    }
    #spectrumPalette{
        li{
            width: 30px;
            height: 30px;
            border: 1px solid #d0d0d0;
            margin: 2px;
            float: left;
            font-size: 0;
            cursor: pointer;
        }
    }
     .el-drawer__header{
        color: #333;
        font-size: 16px;
        margin-bottom: 20px;
        
    }
     .el-drawer__body{
        padding: 0 20px;
        p{
            margin: 10px 0;
            font-size: 14px;
        }
    }
     .el-dialog__header{
        padding-bottom: 0;
        border-bottom: 1px solid #eee;
        padding-bottom: 16px;
    }
     .el-dialog__title{
        font-size: 16px;
        color: #555;
        font-weight: 800;
        
    }
     .el-dialog__body{
        padding-top: 10px;
    }
     .el-date-editor.el-input{
        width: 240px;
    }
     .el-select>.el-input{
        width: 240px;
    }
     :focus {
        outline: 0;
    }
}

</style>
